<template>
  <div
    :class="ggclass"
    class="row-box"
    ref="row"
    :style="{ 'grid-template-columns': repeat, 'grid-gap': gridGap }"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from "vue";
const props = defineProps({
  ggclass: {
    type: String,
    default: "",
  },
  gridGap: {
    type: String,
    default: "20rpx",
  },
  number: {
    type: Number,
    default: 2,
  },
});
const repeat = computed(() => {
  return `repeat(${props.number},1fr)`;
});
</script>

<style lang="scss" scoped>
.row-box {
  display: grid;
  width: 100%;
}
</style>
